<template>
	<view class="">
		<view >
			<u-tabs  name="cate_name" :list="titList" :is-scroll="true" active-color="#002B56" :current="current" 
				@change="tabChange"></u-tabs>
		</view>
	<!-- 	<view class="page sortBox _flex align-items_center _justify_between">
			<view class="">
				<text style="margin-right: 10rpx;">价格</text>
				<u-icon size="20" name="arrow-down-fill"></u-icon>
			</view>
			<view class="">
				<text style="margin-right: 10rpx;">车型</text>
				<u-icon size="20" name="arrow-down-fill"></u-icon>
			</view>
			<view class="">
				<text style="margin-right: 10rpx;">品牌</text>
				<u-icon size="20" name="arrow-down-fill"></u-icon>
			</view>
		</view> -->
		<view class="page " style="">
			<view @click="carDetail(item)" class="_flex dataList align-items_center"  v-for="(item,index) in dataList" :key="index">
				<view class="_flex align-items_center" style="width: 80%;">
					<view class="">
							<view  class="sortNum sortfont" v-if="index==0">
								<text style="font-style: italic">{{index+1}}</text>
								<text class="sortSubfont">st</text>
							</view>
							<view  class="sortNum sortfont" v-else-if="index==1">
								<text style="font-style: italic">{{index+1}}</text>
								<text class="sortSubfont">nd</text>
							</view>
							<view  class="sortNum sortfont" v-else-if="index==2">
								<text style="font-style: italic">{{index+1}}</text>
								<text class="sortSubfont">rd</text>
							</view>
							<view class="sortfont" style="color: #999;" v-else>
								{{index+1}}
							</view>
					</view>
					<image :src="item.img" mode="aspectFit" style="width: 200rpx;height: 160rpx;">
					</image>
					<view class="news-wrap" style="width: 260rpx;">
						<view style="font-weight: bold;    font-size: 30rpx;white-space: nowrap;">
							{{item.title}}
						</view>
						<view style="color: #EB5F2B;">
							{{item.num}}万起
						</view>
					</view>
				</view>
				<view class="" style="width: 20%;text-align: right;">
					<view class="" style="color: #2BB38D;">
						↓{{item.discount}}万
					</view>
				<view class="" style="color: #888;">
					降幅{{item.percent}}%
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {URL,BASEURL} from "../../config.js"
export default {
	data() {
		return {
			form: {
			},
			current: 0,
			titList: [{
					name: '保值率',
				}, 
				{
					name: '投诉',
				},
				// {
				// 	name: '车源量'
				// },
				{
					name: '销量',
				},
				{
					name: '电耗',
				},
				// {
				// 	name: '降价',
				// }
			],
			dataList: [
				// {
				// 	title1:"2019款Model 3 长续航后驱升级版",
				// 	img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/model3.png",
				// 	title: "Model 3",
				// 	desc: "2020-02上牌/3万公里/北京",
				// 	num: "27946",
				// 	sort:1
				// },
				{
					title1:"2019款Model 3 长续航后驱升级版",
					img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/car/ph_xny_01.png",
					title: "宏光MINI EV",
					desc: "2020-08上牌/1.2万公里/上海",
					num: "13.58",
					sort:1,
					discount:"9.00",
					percent:40
				},
				{
					title1:"2019款Model 3 长续航后驱升级版",
					img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/car/ph_xny_02.png",
					title: "Model Y ",
					desc: "2018-04上牌/3.2万公里/宁波",
					num: "12.74",
					sort:2,
					discount:"7.01",
					percent:40
				},
				{
					title1:"2019款Model 3 长续航后驱升级版",
					img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/car/ph_xny_03.png",
					title: "长安CS75 PHEV ",
					desc: "2018-04上牌/3.2万公里/宁波",
					num: "14.97",
					sort:3,
					discount:"6.00",
					percent:38
				},{
					title1:"2019款Model 3 长续航后驱升级版",
					img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/car/ph_xny_04.png",
					title: "Model3",
					desc: "2018-04上牌/3.2万公里/宁波",
					num: "9.35",
					sort:4,
					discount:"4.40",
					percent:36
				},
				{
					title1:"2019款Model 3 长续航后驱升级版",
					img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/car/ph_xny_05.png",
					title: "Aion S(埃安S)",
					desc: "2018-04上牌/3.2万公里/宁波",
					num: "6.65",
					sort:5,
					discount:"6.17",
					percent:35
				},
				{
					title1:"2019款Model 3 长续航后驱升级版",
					img:"https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/car/ph_xny_06.png",
					title: "小蚂蚁	",
					desc: "2018-04上牌/3.2万公里/宁波",
					num: "10.09",
					sort:6,
					discount:"15.95",
					percent:35
				},
			],
		};
	},
	onLoad(option) {
		console.log(option)
			this.current=option.active
	},
	methods:{
		tabChange(index) {
			this.current = index;
			if(index!==3){
				this.dataList=this.dataList.reverse()
			}else{
				this.dataList =this.dataList.sort(this.compare('sort'))
			}
			
		},
		compare(property){
			return function (obj1,obj2){
				return obj1[property]-obj2[property];
			}
		},
		carDetail(e){
			uni.navigateTo({
				url:"../buyCar/usedCarDetail"
			})
		}
		}
};
</script>
<style scoped>
	.sortBox {
		background: #fff;
		color: #888;
		height: 75rpx;
	}
	
	.dataList {
		background: #fff;
		    margin: 20rpx 0;
		    border-bottom: 1px solid #eee;
		    padding: 30rpx;
		    border-radius: 17rpx;
	}
	.news-wrap {
		margin-left: 20rpx;
		line-height: 45rpx;
		color: #333333;
	}
	.sortNum{
		color: #EB5F2B;
		    font-size: 27rpx;
		    font-weight: bold;
	}
	.sortfont{
		    font-size: 50rpx;
			 font-weight: bold;
	}
	.sortSubfont{
		font-size: 28rpx;
		    color: #000;
		    margin-left: 5rpx;
			   
	}
</style>
